<template>
	<div class="app-contain">
		<div class="u-plan-wrap uc-plan-title uc-m-top">
			<header class="u-header-title clearfix">
				<a :class="page.status==true?'current':''" href="javascript:;" @click="changStatus(true)"><span>已申请</span></a>
				<a :class="page.status==false?'current':''" href="javascript:;" @click="changStatus(false)"><span>未申请</span></a>

			</header>
			<section class="uc-emp-box">
				<div v-show="page.status==true">
					<el-table :data="bookList" style="width: 100%" v-show="bookList.length>0">
						<el-table-column type="expand">
							<template slot-scope="props">
								<el-form label-position="left" inline class="demo-table-expand">
									<el-form-item label="姓名">
										<span>{{ props.row.userName }}</span>
									</el-form-item>
									<el-form-item label="英文名">
										<span>{{ props.row.userEnglishName }}</span>
									</el-form-item>
									<el-form-item label="证书名称">
										<span>{{ props.row.name }}</span>
									</el-form-item>
									<el-form-item label="证书英文名">
										<span>{{ props.row.englishName }}</span>
									</el-form-item>
									<el-form-item label="颁发日期">
										<span>{{ props.row.openingDate }}</span>
									</el-form-item>
									<el-form-item label="有效期">
										<span>{{ props.row.period }}</span>
									</el-form-item>
								</el-form>
							</template>
						</el-table-column>
						<el-table-column label="证书编号" prop="number">
						</el-table-column>
						<el-table-column label="证书名称" prop="name" width="280px">
						</el-table-column>
						<el-table-column label="颁发日期" prop="openingDate">
						</el-table-column>
						<el-table-column label="有效期" prop="period">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" @click="lookBook(scope.row.id)">查看证书</el-button>

							</template>
						</el-table-column>
					</el-table>
					<section class="mt30 mb30 tac u-p-nodata" v-show="bookList.length<1">
						<em class="no-data-ico cTipsIco">&nbsp;</em>
						<span class="c-666 fsize14 ml10 vam"> 您 还没有 已申请证书~ </span>
					</section>

				</div>
				<div v-show="page.status==false">
					<el-table :data="bookList" style="width: 100%" v-show="bookList.length>0">
						<el-table-column label="证书名称" prop="name" width="280px">
						</el-table-column>
						<el-table-column label="颁发日期" prop="openingDate">
						</el-table-column>
						<el-table-column label="有效期" prop="period">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" @click="applyBook(scope.row.id)">申请证书</el-button>
							</template>
						</el-table-column>
					</el-table>
					<section class="mt30 mb30 tac u-p-nodata" v-show="bookList.length<1">
						<em class="no-data-ico cTipsIco">&nbsp;</em>
						<span class="c-666 fsize14 ml10 vam"> 您 还 没 有 未申请证书~ </span>
					</section>
				</div>
				<div class="page-mar-top tac" style="margin: 30px; 0" v-show="totalResultSize>0">
					<el-pagination background prev-text="上一页" next-text='下一页' layout="prev, pager, next" :current-page="page.currentPage" :page-count="totalPageSize" :total="totalResultSize" @current-change="currentChange">
					</el-pagination>

				</div>

			</section>

		</div>
	</div>
</template>

<script>
	import { Message } from 'element-ui';
	import { getTime } from '@/utils/index'
	import { getCertificate, certificateApply } from '@/api/uc'
	export default {
		name: 'plan',
		data() {
			return {

				bookList: [],
				totalResultSize: 1,
				totalPageSize: 1,
				page: {
					currentPage: 1,
					status: true,
				},
			}
		},
		computed: {
			getUserInfo() {
				return this.$store.getters.getStorageInfo;
			}
		},
		created() {
			this.page["userId"] = this.getUserInfo.id;
			this.getCertificate(this.page);
		},
		methods: {

			getCertificate(data) {
				getCertificate(data).then((res) => {
					let entitys = res.entity;
					this.bookList = entitys.data;
					this.totalResultSize = entitys.page.totalResultSize;
					this.totalPageSize = entitys.page.totalPageSize;
				})
			},
			changStatus(val) {
				this.page.status = val;
				this.getCertificate(this.page);
			},
			currentChange(val) {
				this.page.currentPage = val;
				this.getCertificate(this.page);
			},
			lookBook(id) {
				this.$router.push({
					path: "bookInfo",
					query: {
						id: id
					}
				});

			},
			applyBook(id){
				certificateApply(id).then((res)=>{
					
                    if(res){
                    	let entitys = res.entity;
                    	Message.success({
							 showClose: true,
	         				 message: '申请成功'
						});
						
						this.$router.push({
							path: "bookInfo",
							query: {
								id: entitys.id
							}
						});	
                    }
					
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../../assets/style/uCenter-nxb.scss'
</style>